<template>

    <view>
      <view class="goods-list">
        <view class="goods-item" v-for="(goodItem,goodIndex) in goodsList" :key="goodIndex" @click="goToDetail(goodItem)">
          <image :src="goodItem.goodPic" class="goods-pic"></image>
          <view class="goods-info">
            <view>{{goodItem.goodName}}</view>
            <view class="price">￥{{goodItem.price}}</view>
          </view>
        </view>
      </view>
    </view>

</template>

<script>
export default {
  data() {
    return {
      queryInfo:{
        page:1,
        pageSize:10
      },
      goodsList:[],
      isLogding: false
    };
  },
  methods: {
    async getGoodsList() {
      this.isLogding = true
      const {
        data: res
      } = await uni.$http.get('/goodslist',{query:this.queryInfo})

      this.isLogding = false

      if (res.status !== 200) {
        return uni.showToast({
          title: '数据加载失败',
          icon: 'none',
          duration: 1000
        })
      }
      // console.log(res)
      this.goodsList = [...this.goodsList, ...res.data]
    },
    goToDetail(item){
      console.log(item)
      uni.navigateTo({
        url:`/subpkg/goods-detail/goods-detail?goodid=${item.goodsId}`,
      })
    }
  },
  onLoad(options) {
    this.getGoodsList()
    // console.log(options.name)
    uni.setNavigationBarTitle({
          title:options.name
        })


  },
  onReachBottom() {
    if (this.isLogding == false){
      this.getGoodsList()
    }

  },
}
</script>

<style lang="scss">
.goods-list{
  .goods-item{
    width:100%;
    height:220rpx;
    margin-bottom:10rpx;
    display: flex;
    border-bottom:1px solid #f0f0f0;
    .goods-pic{
      display: block;
      width:200rpx;
      height:200rpx;
      margin-right:10rpx;
    }
    .goods-info{
      flex:1;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      .price{
        color:#FF5A5F;
      }
    }

  }
}
</style>
